import * as React from 'react';
import { Form, Input, Button,message, Icon, Checkbox, Tabs, Row, Col, Alert } from 'antd';
import { Link } from 'react-router-dom';
import * as classNames from 'classnames';
import MD5 from 'md5';

import { USERS } from '../../api';
import { Ajax } from '../../utils';
import './Login.less';

const FormItem = Form.Item;
const { TabPane } = Tabs;
class Login extends React.Component<any,any>{

  constructor(props: any) {
    super(props);
    this.state = { isFetching: false };
  }
  public render() {
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
    return (
      <Row type="flex" justify="center" align="middle" className="page">
        <Form onSubmit={this.handleSubmit} className="login-form">
          <div className="logo"/>
          <h1>Oms 运营管理平台</h1>
          <FormItem hasFeedback={true}>
            {getFieldDecorator('account', {
              rules: [{ required: true, message: '请输入用户名！' }],
            })(<Input placeholder="用户名" />)}
          </FormItem>
          <FormItem hasFeedback={true}>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: '请输入密码！' }],
            })(<Input type="password" placeholder="密码" />)}
          </FormItem>
          <FormItem>
            <Button
              loading={this.state.isFetching}
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
          </FormItem>
        </Form>
      </Row>
    );
  }

  private handleSubmit = (e: React.FormEvent<HTMLInputElement>) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      values.password = MD5(values.password);
      !err && this.fetchLogin(values);
    });
  }

  private fetchLogin = (account: any) => {
    this.setState({ isFetching: true });
    // Ajax.post(USERS.LOGIN, { ...account }).then((res: any) => {
    //   if (res.code === '0000') {
    //     localStorage.setItem('token', res.data.token);
    //     localStorage.setItem('loggedIn', 'true');
    //     localStorage.setItem('userInfo', JSON.stringify(res.data));
    //     this.props.history.push('/home');
    //   } else {
    //     message.error(res.msg);
    //     this.setState({ isFetching: false });
    //   }
    // }).catch((err) => this.setState({ isFetching: false }));
    localStorage.setItem('token', "res.data.token");
        localStorage.setItem('loggedIn', 'true');
        localStorage.setItem('userInfo', "JSON.stringify(res.data)");
        this.props.history.push('/home');
    this.props.history.push('/home');
  }
}

const LoginForm = Form.create()(Login);
export default LoginForm as any;
